Gyazo Viewer Page Menu
from /takker/Gyazoにuploadした画像URLをコピペするPage Menu
Gyazoにuploadした画像のURLを取得できるPage Menu
page menuからGyazoを開くと違って、Scrapboxから離れずに直接画像のURLを取得することができる
使うにはGyazoのAccess Tokenが必要
mobileからは使用できない
https://gyazo.com/9974e33870bcaac4d0864cff7e8d3f62
使い方
1. /takker/Gyazo APIのAccess Tokenを発行する
2. 以下を自分のページに貼り付ける
code:js
import {GYAZO_ACCESS_TOKEN} from '/api/code/your-private-project/GYAZO_ACCESS_TOKEN/auth.js';
import {addGyazoMenu} from '/api/code/customize/Gyazo_Viewer_Page_Menu/script.js';
addGyazoMenu({GYAZO_ACCESS_TOKEN, imageNum: 10});
GYAZO_ACCESS_TOKENに1.で取得したAccess Tokenを入れる
Access Tokenは外部に漏れるとまずいので、private projectのコードブロックに貼り付けて、そこから読み込むことを推奨する
private projectのコードブロックなら、参加しているuser以外読み込むことができない
your-private-projectには自分のprivate projectの名前を入れる
code:your-private-project/GYAZO_ACCESS_TOKEN/auth.js
export const GYAZO_ACCESS_TOKEN = XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX;
imageNumに表示する画像の最大数を入れる
/emoji/warning.iconFree版を使っている人は10件までしか取得できない
code:script.js
const id = 'Gyazo Viewer';
export function addGyazoMenu({GYAZO_ACCESS_TOKEN, imageNum, theme = 'light'} = {}) {
scrapbox.PageMenu.addMenu({
title: id,
image: 'https://i.gyazo.com/503a911fea542532aa5aba0a88eb7b60.png',
onClick: () => loadGyazoImages({GYAZO_ACCESS_TOKEN, imageNum, theme}),
});
}
async function loadGyazoImages({GYAZO_ACCESS_TOKEN, imageNum, theme}) {
let timer = null;
try {
const promise = fetch(https://api.gyazo.com/api/images?access_token=${GYAZO_ACCESS_TOKEN}&per_page=${imageNum});
// 読み込みに時間がかかるようであれば、読み込み中の表示を出す
timer = setTimeout(() => {
scrapbox.PageMenu(id).addItem({
title: 'Loading...',
image: https://img.icons8.com/ios/180/${theme === 'dark' ? 'FFFFFF/' : ''}loading.png,
onClick: () => {},
})},
100);
const res = await promise;
const images = await res.json();
clearTimeout(timer);
scrapbox.PageMenu(id).removeAllItems();
images.filter(image => image.image_id !== '')
.forEach(image =>
scrapbox.PageMenu(id).addItem({
title: image.metadata.title ?? 'Untitled',
image: image.url,
onClick: () => navigator?.clipboard?.writeText?.(image.permalink_url),
})
);
} catch(e) {
clearTimeout(timer);
scrapbox.PageMenu(id).removeAllItems();
scrapbox.PageMenu(id).addItem({
title: 'Failed to load the image list.',
image: https://i.gyazo.com/9fb0ce04c8ce55890f1388e21f36dccc.png,
onClick: () => {},
});
console.log('Failed to load the image list. %o',e);
}
}